<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页-小米官网</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
</head>

<body>
    <!-- top -->
    <div class="top">
        <div class="container">
            <ul class="left">
                <li><a href="#">小米商城</a></li>
                <li><a href="#">IoT</a></li>
                <li><a href="#">云服务</a></li>
                <li><a href="#">金融</a></li>
                <li><a href="#">有品</a></li>
                <li><a href="#">小爱开放平台</a></li>
                <li><a href="#">企业团购</a></li>
                <li><a href="#">资质证照</a></li>
                <li><a href="#">协议规则</a></li>
                <li><a href="#">下载app</a></li>
                <li><a href="#">Select Location</a></li>
            </ul>
            <ul class="right">
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
                <li><a href="#">消息通知</a></li>
                <li class="cart">
                    <a href="#">
                        <span class="iconfont icon-gouwuche icon-cart"></span>
                        <span class="text-cart">购物车(0)</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- navbar -->
    <div class="navbar">
        <div class="container">
            <div class="logo">
                <a href="#"></a>
            </div>
            <div class="nav">
                <a href="#">小米手机</a>
                <a href="#">Redmi红米</a>
                <a href="#">电视</a>
                <a href="#">笔记本</a>
                <a href="#">家电</a>
                <a href="#">路由器</a>
                <a href="#">智能硬件</a>
                <a href="#">服务社区</a>
            </div>
            <div class="search">
                <div class="txt">
                    <input type="text" placeholder="搜索关键字">
                    <span class="keyword1">Redmi Note 8</span>
                    <span class="keyword2">Pro小米9</span>
                </div>
                <div class="btn">
                    <span class="iconfont icon-RectangleCopy icon-search"></span>
                </div>
            </div>
        </div>
    </div>
   
    <!-- 侧边栏导航和轮播图区域 -->
    <div class="container banner">
        <div class="nav-aside">
            <ul>
                <li>
                    <a href="#">手机电话卡</a>
                    <span class="iconfont icon-arrow-right"></span>
                </li>
                <li>
                    <a href="#">电视盒子</a>
                    <span class="iconfont icon-arrow-right"></span>
                </li>
                <li>
                    <a href="#">笔记本平板</a>
                    <span class="iconfont icon-arrow-right"></span>
                </li>
                <li>
                    <a href="#">家电插线板</a>
                    <span class="iconfont icon-arrow-right"></span>
                </li>
                <li>
                    <a href="#">出行穿戴</a>
                    <span class="iconfont icon-arrow-right"></span>
                </li>
                <li>
                    <a href="#">智能路由器</a>
                    <span class="iconfont icon-arrow-right"></span>
                </li>
                <li>
                    <a href="#">健康儿童</a>
                    <span class="iconfont icon-arrow-right"></span>
                </li>
                <li>
                    <a href="#">耳机音响</a>
                    <span class="iconfont icon-arrow-right"></span>
                </li>
                <li>
                    <a href="#">生活箱包</a>
                    <span class="iconfont icon-arrow-right"></span>
                </li>
            </ul>
        </div>
        <div class="slider">
            <img src="./images/banner/banner_bg.webp" alt="">
            <img src="./images/banner/01.png" alt="">
            <img src="./images/banner/02.png" alt="">
            <img src="./images/banner/03.png" alt="">
            <img src="./images/banner/04.png" alt="">
            <div class="left-arrow">
                <span class="iconfont icon-arrow-lift"></span>
            </div>
            <div class="right-arrow">
                <span class="iconfont icon-arrow-right"></span>
            </div>
            <ul class="indexes">
                <li class="current"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    <!-- 产品推荐 -->
    <div class="container product-rec">
        <div class="box1">
            <ul>
                <li>
                    <img src="./images/shortcut/shortcut_left/shortcut_left_item1.png" alt="">
                    <p>小米秒杀</p>
                </li>
                <li>
                    <img src="./images/shortcut/shortcut_left/shortcut_left_item2.png" alt="">
                    <p>企业团购</p>
                </li>
                <li>
                    <img src="./images/shortcut/shortcut_left/shortcut_left_item3.png" alt="">
                    <p>F码通道</p>
                </li>
                <li>
                    <img src="./images/shortcut/shortcut_left/shortcut_left_item4.png" alt="">
                    <p>米粉卡</p>
                </li>
                <li>
                    <img src="./images/shortcut/shortcut_left/shortcut_left_item5.png" alt="">
                    <p>以旧换新</p>
                </li>
                <li>
                    <img src="./images/shortcut/shortcut_left/shortcut_left_item6.png" alt="">
                    <p>话费充值</p>
                </li>
            </ul>
        </div>
        <div class="box2">
            <img src="./images/shortcut/shortcut_right/shortcut_right_item1.png" alt="">
        </div>
        <div class="box3">
            <img src="./images/shortcut/shortcut_right/shortcut_right_item2.png" alt="">
        </div>
        <div class="box4">
            <img src="./images/shortcut/shortcut_right/shortcut_right_item3.png" alt="">
        </div>
    </div>
    <!-- 小米闪购 -->
    <div class="mi-seckill">
        <div class="container">
            <div class="title-wrap">
                <h1>
                    小米闪购
                </h1>
                <div>
                    <div class="btn-left">
                        <span class="iconfont icon-arrow-lift"></span>
                    </div>
                    <div class="btn-right">
                        <span class="iconfont icon-arrow-right"></span>
                    </div>
                </div>
            </div>
            <ul class="content-wrap">
                <li class="item-first">
                    <p class="font-red">
                        14:00场
                    </p>
                    <div class="icon-shandian">
                        <span class="iconfont icon-shandian-copy"></span>
                    </div>
                    <p class="font-gray">距离开始还有</p>
                    <ul class="countdown">
                        <li class="time hour">00</li>
                        <li class="diliver">:</li>
                        <li class="time minute">00</li>
                        <li class="diliver">:</li>
                        <li class="time second">00</li>
                    </ul>
                </li>
                <li>
                    <img src="images/flashsale/flashsale_pic2.png" alt="">
                </li>
                <li>
                    <img src="images/flashsale/flashsale_pic3.png" alt="">
                </li>
                <li>
                    <img src="images/flashsale/flashsale_pic4.png" alt="">
                </li>
                <li class="item-last">
                    <img src="images/flashsale/flashsale_pic5.png" alt="">
                </li>
            </ul>
        </div>
    </div>
    <!-- 广告位 -->
    <div class="adv">
        <div class="container">
            <img src="images/flashsale/flashsale_foot.png" alt="">
        </div>
    </div>
    <!-- 手机 -->
    <div class="mobile">
        <div class="container ">
            <div class="title-wrap">
                <h3>手机</h3>
                <a href="#" class="more">
                    查看全部
                    <span>
                        <span class="iconfont icon-arrow-right"></span>
                    </span>
                </a>
            </div>
            <div class="content-wrap">
                <div class="left">
                    <img src="./images/floors/box_left.png" alt="">
                </div>
                <div class="right">
                    <ul class="ul-01">
                        <li>
                            <img src="images/floors/box_right_item1.png" alt="">
                        </li>
                        <li>
                            <img src="images/floors/box_right_item1.png" alt="">
                        </li>
                        <li>
                            <img src="images/floors/box_right_item1.png" alt="">
                        </li>
                        <li class="item04">
                            <img src="images/floors/box_right_item1.png" alt="">
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <img src="images/floors/box_right_item1.png" alt="">
                        </li>
                        <li>
                            <img src="images/floors/box_right_item1.png" alt="">
                        </li>
                        <li>
                            <img src="images/floors/box_right_item1.png" alt="">
                        </li>
                        <li class="item04">
                            <img src="images/floors/box_right_item1.png" alt="">
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 家电 -->
    <div class="mobile jiadian">
        <div class="container ">
            <div class="title-wrap">
                <h3>家电</h3>
                <div class="more">
                    <a href="#">热门</a>
                    <a href="#">电视影音</a>
                </div>
            </div>
            <div class="content-wrap">
                <div class="left">
                    <img src="./images/floors/box_left.png" alt="">
                </div>
                <div class="right">
                    <ul class="ul-01">
                        <li>
                            <img src="images/floors/box_right_item1.png" alt="">
                        </li>
                        <li>
                            <img src="images/floors/box_right_item1.png" alt="">
                        </li>
                        <li>
                            <img src="images/floors/box_right_item1.png" alt="">
                        </li>
                        <li class="item04">
                            <img src="images/floors/box_right_item1.png" alt="">
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <img src="images/floors/box_right_item1.png" alt="">
                        </li>
                        <li>
                            <img src="images/floors/box_right_item1.png" alt="">
                        </li>
                        <li>
                            <img src="images/floors/box_right_item1.png" alt="">
                        </li>
                        <li class="item04">
                            <img class="item-more" src="images/floors/box_right_item_more1.png" alt="">
                            <img src="images/floors/box_right_item_more2.png" alt="">
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部 -->
    <div class="container footer">
        <ul class="section-01">
            <li>
                <span class="iconfont icon-banshou"></span>
                预约维修服务
            </li>
            <li>
                <span class="iconfont icon-banshou"></span>
                预约维修服务
            </li>
            <li>
                <span class="iconfont icon-banshou"></span>
                预约维修服务
            </li>
            <li>
                <span class="iconfont icon-banshou"></span>
                预约维修服务
            </li>
            <li class="item-01">
                <span class="iconfont icon-banshou"></span>
                预约维修服务
            </li>
        </ul>
        <div class="section-02">
            <ul>
                <li>
                    <ul>
                        <li class="title">
                            帮助中心
                        </li>
                        <li>
                            账户管理
                        </li>
                        <li>
                            购物指南
                        </li>
                        <li>
                            订单操作
                        </li>
                    </ul>
                </li>
                <li>
                    <ul>
                        <li class="title">
                            帮助中心
                        </li>
                        <li>
                            账户管理
                        </li>
                        <li>
                            购物指南
                        </li>
                        <li>
                            订单操作
                        </li>
                    </ul>
                </li>
                <li>
                    <ul>
                        <li class="title">
                            帮助中心
                        </li>
                        <li>
                            账户管理
                        </li>
                        <li>
                            购物指南
                        </li>
                        <li>
                            订单操作
                        </li>
                    </ul>
                </li>
                <li>
                    <ul>
                        <li class="title">
                            帮助中心
                        </li>
                        <li>
                            账户管理
                        </li>
                        <li>
                            购物指南
                        </li>
                        <li>
                            订单操作
                        </li>
                    </ul>
                </li>
                <li>
                    <ul>
                        <li class="title">
                            帮助中心
                        </li>
                        <li>
                            账户管理
                        </li>
                        <li>
                            购物指南
                        </li>
                        <li>
                            订单操作
                        </li>
                    </ul>
                </li>
                <li>
                    <ul>
                        <li class="title">
                            帮助中心
                        </li>
                        <li>
                            账户管理
                        </li>
                        <li>
                            购物指南
                        </li>
                        <li>
                            订单操作
                        </li>
                    </ul>
                </li>
            </ul>
            <div>
                <p class="tel">400-100-5678</p>
                <p class="text-gray">周一至周日 8:00-18:00</p>
                <p class="text-gray">（仅收市话费）</p>
                <a  href="#" class="concat">人工客服</a>
            </div>
        </div>
    </div>

    <!-- 版权 -->
    <div class="copyright">
        <div class="container">
            <div class="logo">
                <img src="./images/header/logo.png" alt="">
            </div>
            <div class="text-copyright">
                <p>小米商城 | MIUI | 米家 | 米聊 | 多看 | 游戏 |路由器 | 米粉卡 | 政企服务 | 小米天猫店 | 小米集团隐私政策 | 小米商城隐私政策 | 小米商城用户协议 | 问题反馈 | 廉正举报 | 诚信合规 | Select Location</p>
                <p>© mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2017]1530-131号</p>                  
                <p>（京）网械平台备字（2018）第00005号 互联网药品信息服务资格证 (京) -非经营性-2014-0090 营业执照 医疗器械公告</p>
                <p>增值电信业务许可证 网络食品经营备案（京）【2018】WLSPJYBAHF-12 食品经营许可证</p>
                <p>违法和不良信息举报电话：185-0130-1238 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
                <img src="images/info/info_02.png" alt="">
                <img src="images/info/info_03.png" alt="">
                <img src="images/info/info_04.png" alt="">
                <img src="images/info/info_05.png" alt="">
                <p class="slogan">
                    探索黑科技，小米为发烧而生
                </p>
            </div>
        </div>
    </div>

</body>
<script src="js/index.js"></script>

</html>